<template>
  <div class="main clearfix">
    <index-head></index-head>
    <div class="breadcrumb_mainBody_tab_tilte">
      <index-breadcrumb></index-breadcrumb>
      <div class="listed_base_info_select">
        <el-select v-model="baseApi" placeholder="请选择" @change="getList">
          <el-option v-for="item in baseApis" :key="item.key" :label="item.label" :value="item.key"></el-option>
        </el-select>
      </div>
      <div class="mainBody_tab_tilte_parent listed_tag_select">
        <ul class="mainBody_tab_tilte clearfix" style="color: #fff">
          <li @click="output">
            <img src="../assets/image/mainCon_icon2.png" />
            <span>导出数据</span>
          </li>
          <li @click="saveTableImg">
            <img src="../assets/image/mainCon_icon4.png" />
            <span>保存为图片</span>
          </li>
        </ul>
      </div>
    </div>
    <div class="mainPositionWin" v-show="mainPositionWinShow">
      <div class="positionTitle">
        <div class="clearfix">
          <p class="positionTitle_a">条件</p>
          <p class="positionTitle_close" @click="conditionsClose">
            <img src="../assets/image/close.png" />
          </p>
          <p class="positionTitle_clear" @click="conditionsClear">清空</p>
          <p class="positionTitle_extract" @click="termSubmit">数据提取</p>
        </div>
        <div class="navCntBox" style="margin-bottom: 20px">
          <div class="getIndexBox">
            <span class="titleYellow">行业</span>
            <!-- <input
              type="text"
              v-model="filterGetIndex"
              placeholder="输入关键字进行过滤"
              class="getIndexInput"
            /> -->
            <el-checkbox-group v-model="getIndex" @change="handleCheckedGetIndexChange">
              <el-checkbox v-show="
                  filterGetIndex ? item.indexOf(filterGetIndex) >= 0 : true
                " v-for="item in defaultCheckedKeysData" :label="item" :key="item">{{ item }}
              </el-checkbox>
            </el-checkbox-group>
          </div>
          <div class="getRegionBox">
            <span class="titleYellow">地区</span>
            <el-checkbox-group v-model="getRegion" @change="handleCheckedGetRegionChange">
              <el-checkbox v-for="item in defaultCheckedKeysRegion" :label="item" :key="item">{{ item }}
              </el-checkbox>
            </el-checkbox-group>
          </div>
          <div class="getTimeBox" style="border-right: 1px solid #595a60">
            <p class="titleYellow">时间</p>
            <el-checkbox-group v-model="getTime" @change="handleCheckedGetTimeChange">
              <el-checkbox v-for="item in defaultCheckedKeysTime" :label="item" :key="item">{{ item }}
              </el-checkbox>
            </el-checkbox-group>
          </div>
          <div class="getTimeBox">
            <p class="titleYellow">上市板块</p>
            <el-checkbox-group v-model="getHsp" @change="handleCheckedGetHspChange">
              <el-checkbox v-for="item in defaultCheckedKeysHsp" :label="item" :key="item">{{ item }}
              </el-checkbox>
            </el-checkbox-group>
          </div>
        </div>
      </div>
    </div>
    <div class="clearfix">
      <div class="mainTerm">
        <el-tabs v-model="activeName" type="card">
          <el-tab-pane label="行业" name="first">
            <div class="clearfix">
              <el-input placeholder="输入关键字进行过滤" v-model="filterText" class="inputFloat"></el-input>
              <img src="../assets/image/refresh.png" class="imgFloat" @click="filterTextClear" />
            </div>
            <div class="tree">
              <el-tree class="filter-tree" :data="data" :props="defaultProps" :filter-node-method="filterNode" ref="tree" show-checkbox node-key="label" :default-expanded-keys="[]" :default-checked-keys="defaultCheckedKeysData" @check="nodeClickHandle"></el-tree>
            </div>
            <!--            @check-change="checkChangeHandle"-->
          </el-tab-pane>

          <el-tab-pane label="地区" name="second" class="timeCheck">
            <div class="clearfix">
              <el-input placeholder="输入关键字进行过滤" v-model="filterTextRegion" class="inputFloat"></el-input>
              <img src="../assets/image/refresh.png" class="imgFloat" @click="filterTextRegionClear" />
            </div>
            <div class="tree">
              <el-tree class="filter-tree" :data="dataRegion" :props="defaultProps" :default-expand-all="true" :filter-node-method="filterNode" ref="treeRegion" show-checkbox node-key="label" :default-checked-keys="defaultCheckedKeysRegion" @check="nodeClickHandleRegion"></el-tree>
              <!--              @check-change="checkChangeHandleRegion"-->
            </div>
          </el-tab-pane>
          <el-tab-pane label="时间" name="three" class="timeCheck">
            <div class="clearfix">
              <el-input placeholder="输入关键字进行过滤" v-model="filterTextTime" class="inputFloat"></el-input>
              <img src="../assets/image/refresh.png" class="imgFloat" @click="filterTextTimeClear" />
            </div>

            <el-dropdown trigger="click" @command="timeFilterSelectFn" style="color: #fff" class="timeSelect">
              <span class="el-dropdown-link">
                {{ timeFilterSelectVal
                }}<i class="el-icon-arrow-down el-icon--right"></i>
              </span>
              <el-dropdown-menu slot="dropdown">
                <el-dropdown-item :command="item" v-for="item in timeFilterSelectArr" :key="item.label">{{ item.label }}
                </el-dropdown-item>
              </el-dropdown-menu>
            </el-dropdown>

            <div class="tree">
              <el-tree class="filter-tree" :data="dataTime" :props="defaultProps" :default-expand-all="true" :filter-node-method="filterNode" ref="treeTime" show-checkbox node-key="label" :default-checked-keys="defaultCheckedKeysTime" @check="nodeClickHandleTime"></el-tree>
            </div>
            <!--            @check-change="checkChangeHandleTime"-->
          </el-tab-pane>
          <el-tab-pane label="板块" name="baseInfo" class="timeCheck">
            <div class="clearfix">
              <el-input placeholder="输入关键字进行过滤" v-model="filterTextHsplate" class="inputFloat"></el-input>
              <img src="../assets/image/refresh.png" class="imgFloat" @click="filterTextHsplate = ''" />
            </div>
            <div class="tree">
              <el-tree class="filter-tree" :data="dataHsplate" node-key="label" :props="defaultProps" :default-expand-all="true" :filter-node-method="filterNode" ref="dataHsplate" show-checkbox :default-checked-keys="defaultCheckedKeysHsp" @check="nodeClickHandleHsp"></el-tree>
              <!--              @check-change="checkChangeHandleRegion"-->
            </div>
          </el-tab-pane>
        </el-tabs>
        <p @click="termlook" class="conditions">查看条件</p>
      </div>
      <div class="mainContainer">
        <div class="table-l emptyLeft" ref="tableWrapper" v-loading="loading">
          <el-table id="mytable" :data="tableData" style="width: 100%" height="75vh" @cell-click="showDialog" ref="multipleTable">
            <el-table-column label="序号" type="index" width="75" fixed></el-table-column>
            <template v-for="item in tableColumn">
              <el-table-column :key="item.key" :prop="item.prop" :label="item.label" :fixed="!!item.fixed" :show-overflow-tooltip="true" :width="item.width || 200" sortable align="center">
              </el-table-column>
            </template>
          </el-table>
        </div>
        <div class="flex-center">
          <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="page" :page-sizes="[20, 40, 60, 80]" :page-size="limit" layout="total, sizes, prev, pager, next, jumper" :total="total">
          </el-pagination>
        </div>
      </div>
    </div>

    <detailsDialog ref="detailsDialog" />
  </div>
</template>

<script>
import { mapGetters,mapMutations } from 'vuex'
import indexBreadcrumb from "../components/breadcrumb";
import indexHead from "../components/head";
import XLSX from "xlsx";
import _ from 'lodash';
import FileSaver from "file-saver";
import html2canvas from "html2canvas";
import listPageConfig from "./components/macro/listPageConfig";
import detailsDialog from "./detailsDialog";
export default {
  name: "listed",
  components: {
    indexHead,
    detailsDialog,
    indexBreadcrumb
  },
  data() {
    return {
      loading: false,
      baseApi: "1",
      baseApis: listPageConfig,
      tableData: [],
      page: 1,
      limit: 20,
      total: 0,
      baseCodes: "",
      mainPositionWinShow: false,
      activeName: "first",
      filterText: "",
      filterTextRegion: "",
      filterTextTime: "",
      filterTextHsplate: "",
      data: [],
      defaultCheckedKeysData: [],
      defaultCheckedKeysTime: [],
      defaultCheckedKeysRegion: [],
      defaultCheckedKeysHsp: [],
      getIndex: [],
      sourceDataChecked: [], // 接口返回的默认选中的指标
      filterGetIndex: "",
      // getTimes: [],
      // getRegions: [],
      // getIndexs: [],
      getTime: [],
      getRegion: [],
      getHsp: [],
      dataRegion: [],
      dataTime: [],
      dataHsplate: [],
      defaultProps: {
        children: "children",
        label: "label",
      },
      timeFilterSelectArr: [

        {
          value: 5,
          label: "近5年",
        },
        {
          value: 10,
          label: "近10年",
        },
        {
          value: 20,
          label: "近20年",
        },
      ],
      timeFilterSelectVal: "",
      sourceData: [],
      currentCode: "",
    };
  },
  // CODES
  computed: {
    ...mapGetters({ userInfo: 'getUserInfo' }),
    tableName() {
      if (this.$route.query.tablename.indexOf("season") != -1)
        //前4/8/12季度
        this.timeFilterSelectArr = [

          {
            value: 4,
            label: "前4季度",
          },
          {
            value: 8,
            label: "前8季度",
          },
          {
            value: 12,
            label: "前12季度",
          },
        ];
      else if (this.$route.query.tablename.indexOf("month") != -1)
        //前4/8/12季度
        this.timeFilterSelectArr = [

          {
            value: 12,
            label: "前12月",
          },
          {
            value: 24,
            label: "前24月",
          },
          {
            value: 36,
            label: "前36月",
          },
        ];

      return this.$route.query.tablename || "area_province_year";
    },
    breadcrumb(){
      return this.$route.query.breadcrumb;
    },
    headTag(){
      return this.$route.query.headTag;
    },
    tableColumn() {
      return this.baseApis.find((item) => {
        return item.key === this.baseApi;
      }).thead;
    },
    bodyData() {
      let item = this.baseApis.find((item) => {
        return item.key === this.baseApi;
      });

      return {
        url: `5600/` + item.value,
        method: "post",
        params: {
          page: this.page,
          limit: this.limit,
          CODES: item.key === "1" ? "" : this.baseCodes,
          INF00008S: this.defaultCheckedKeysData.join(","),
          INF00010S: this.defaultCheckedKeysRegion.join(","),
          INF00024S: this.defaultCheckedKeysHsp.join(","),
          TIMES: this.defaultCheckedKeysTime.join(","),
        },
      };
    }
  },
  watch: {
    baseApis(v) {
      console.log(v)
    },
    filterText(val) {
      this.$refs.tree.filter(val);
    },
    filterTextRegion(val) {
      this.$refs.treeRegion.filter(val);
    },
    filterTextTime(val) {
      this.$refs.treeTime.filter(val);
    },
    filterTextHsplate(val) {
      this.$refs.dataHsplate.filter(val);
    },
    defaultCheckedKeysData(val) {
      this.getIndex = val;
      Array.prototype.indexOf = function (val) {
        for (var i = 0; i < this.length; i++) {
          if (this[i] == val) return i;
        }
        return -1;
      };
      Array.prototype.remove = function (val) {
        var index = this.indexOf(val);
        if (index > -1) {
          this.splice(index, 1);
        }
      };
      var emp = this.getIndex;
      emp.remove("全选");
    },
    defaultCheckedKeysRegion(val) {
      this.getRegion = val;
      Array.prototype.indexOf = function (val) {
        for (var i = 0; i < this.length; i++) {
          if (this[i] == val) return i;
        }
        return -1;
      };
      Array.prototype.remove = function (val) {
        var index = this.indexOf(val);
        if (index > -1) {
          this.splice(index, 1);
        }
      };
      var emp = this.getRegion;
      emp.remove("全选");
    },
    defaultCheckedKeysTime(val) {
      this.getTime = val;
      Array.prototype.indexOf = function (val) {
        for (var i = 0; i < this.length; i++) {
          if (this[i] == val) return i;
        }
        return -1;
      };
      Array.prototype.remove = function (val) {
        var index = this.indexOf(val);
        if (index > -1) {
          this.splice(index, 1);
        }
      };
      var emp = this.getTime;
      emp.remove("全选");
    },
    defaultCheckedKeysHsp(val) {
      this.getHsp = val;
      Array.prototype.indexOf = function (val) {
        for (var i = 0; i < this.length; i++) {
          if (this[i] == val) return i;
        }
        return -1;
      };
      Array.prototype.remove = function (val) {
        var index = this.indexOf(val);
        if (index > -1) {
          this.splice(index, 1);
        }
      };
      var emp = this.getHsp;
      emp.remove("全选");
    },
  },
  methods: {
    ...mapMutations(['setBreadcrumb','setHeadTag']),
    showDialog(item) {
       //在基本信息的时候才触发新的接口提交，
      
      if (this.baseApi == "1") {
        ///5600/hscominfo/findByCode/{code}
        this.currentCode = "";

        this.$axios
          .request({
            url: `5600/hscominfo/findByCode/${item.code}`,
            method: "get",
          })
          .then(({ data }) => {
            let arr = [];
            arr.push(data.info);
            this.$refs.detailsDialog.settableColumnandtableData(
              this.tableColumn,
              arr,
              this.defaultCheckedKeysTime,
              this.settableColumnandtableData,
              this.defaultCheckedKeysHsp,
              item.code,
              this.baseApi
            );
          });
      } else {
        this.currentCode = item.code;
        let body = this.bodyData;

        body.params.CODES = this.currentCode;

        this.$axios.request(body).then(({ data }) => {
          this.$refs.detailsDialog.settableColumnandtableData(
            this.tableColumn,
            data.data,
            this.defaultCheckedKeysTime,
            this.settableColumnandtableData,
            this.defaultCheckedKeysHsp,
            item.code,
            this.baseApi
          );
        });
      }
    },
    timeFilterSelectFn(val) {
      //  筛选年份

      this.timeFilterSelectVal = val.label;

      this.$refs.treeTime.setCheckedKeys(this.timeSource.slice(0, val.value));
    },
    filterNode(value, data) {
      if (!value) return true;
      return data.label ? data.label.indexOf(value) !== -1 : false;
    },
    nodeClickHandle(data, { checkedKeys, checkedNodes }) {
      this.defaultCheckedKeysData = checkedKeys;
      this.mainPositionWinShow = true;
    },

    nodeClickHandleRegion(data, { checkedKeys, checkedNodes }) {
      this.defaultCheckedKeysRegion = checkedKeys;
      this.mainPositionWinShow = true;
    },
    nodeClickHandleTime(data, { checkedKeys, checkedNodes }) {
      this.defaultCheckedKeysTime = checkedKeys;
      this.mainPositionWinShow = true;
    },
    nodeClickHandleHsp(data, { checkedKeys, checkedNodes }) {
      this.defaultCheckedKeysHsp = checkedKeys;
      this.mainPositionWinShow = true;
    },
    handleCheckedGetIndexChange() {
      this.defaultCheckedKeysData = this.getIndex;
      this.$refs.tree.setCheckedKeys(this.getIndex);
    },
    handleCheckedGetTimeChange() {
      this.defaultCheckedKeysTime = this.getTime;
      this.$refs.treeTime.setCheckedKeys(this.getTime);
    },
    handleCheckedGetRegionChange() {
      this.defaultCheckedKeysRegion = this.getRegion;
      this.$refs.treeRegion.setCheckedKeys(this.getRegion);
    },
    handleCheckedGetHspChange() {
      this.defaultCheckedKeysHsp = this.getHsp;
      this.$refs.dataHsplate.setCheckedKeys(this.getRegion);
    },
    termSubmit() {
      // 提取数据
      this.getList().then(() => {
        this.mainPositionWinShow = false;
      });
    },
    conditionsClear() {
      this.defaultCheckedKeysData = [];
      this.defaultCheckedKeysTime = [];
      this.defaultCheckedKeysRegion = [];
      this.defaultCheckedKeysHsp = [];
      this.$refs.tree.setCheckedKeys([]);
      this.$refs.treeTime.setCheckedKeys([]);
      this.$refs.treeRegion.setCheckedKeys([]);
      this.$refs.dataHsplate.setCheckedKeys([]);
    },
    conditionsClose() {
      this.mainPositionWinShow = false;
      if (!this.getIndex.length) {
        this.getIndex = this.sourceDataChecked;
        this.handleCheckedGetIndexChange();
      }
    },
    filterTextClear() {
      this.filterText = "";
    },
    filterTextRegionClear() {
      this.filterTextRegion = "";
    },
    filterTextTimeClear() {
      this.filterTextTime = "";
    },

    termlook() {
      window.scrollTo(0, 0);
      this.mainPositionWinShow = true;
    },
    handleSizeChange(val) {
      this.limit = val;
      this.getList();
    },
    handleCurrentChange(val) {
      this.page = val;
      this.getList();
    },
    async getList() {
      var that = this;
     
      if(that.breadcrumb!=undefined){
        this.setBreadcrumb(that.breadcrumb.split(","))
      }
      if(that.headTag!=undefined){
        this.setHeadTag(that.headTag.split(","))
      }
      let res = await this.$axios.request(this.bodyData);
      if (String(res.data.code) === "1") {
        // 失败
        this.$message.error(res.data.resp_msg);
        return;
      }
      let datas = Object.assign([], _.get(res, "data.data", []));
      this.sourceData = _.cloneDeep(datas);
      this.tableData = Object.assign([], datas);
      this.total = _.get(res, "data.count", 0);
      this.$nextTick(() => {
        if (this.$refs.multipleTable && this.$refs.multipleTable.doLayout) {
          this.$refs.multipleTable.doLayout();
        }
      })
      if (this.baseApi === "1") {
        this.baseCodes = datas
          .map((item) => {
            return item.code;
          })
          .join(",");
      }
    },
    saveTableImg() {
      let isexport = this.userInfo.exporttype
      if (!isexport) {
        this.$message({
          message: '试用账号，无此权限！请联系管理员！',
          type: 'warning',
          showClose: true,
          duration: 3000,
          center: true
        });
        return
      }
      html2canvas(this.$refs.tableWrapper).then((canvas) => {
        let dataURL = canvas.toDataURL("image/png");
        let link = document.createElement("a");
        link.href = canvas.toDataURL(); //下载链接
        link.setAttribute("download", $(".excelName").html());
        link.style.display = "none"; //a标签隐藏
        document.body.appendChild(link);
        link.click();
      });
    },
    output() {
      let { exporttype, username, exportRestrictions } = this.userInfo
      if (!exporttype) {
        this.$message({
          message: '试用账号，无此权限！请联系管理员！',
          type: 'warning',
          showClose: true,
          duration: 3000,
          center: true
        });
        return
      }
      if (exportRestrictions) {
        // 查看权限下的导出条数
        this.$axios.request({
          url: "5100/user/exportRestrictions",
          method: "get",
          params: {
            exportNumber: 0,
            userName: username
          },
        }).then(res => {
          let Rpieces = res.data
          if (Rpieces == 0) {
            this.$message({
              message: '试用账号，导出已达上限！',
              type: 'warning',
              showClose: true,
              duration: 3000,
              center: true
            });
            return
          } else {
            // 拷贝原有数据
            let original = JSON.parse(JSON.stringify(this.tableData));
            if (this.tableData.length > Rpieces) {
              let extract = this.tableData.slice(0, Rpieces);
              let Controlcol = this.ReservedBar(extract)
              this.tableData = Controlcol
              this.$nextTick(() => {
                this.QuickPass()
                this.Exportsuccess(Rpieces, username)
              })
            } else {
              let Controlcol = this.ReservedBar(this.tableData)
              this.tableData = Controlcol
              this.$nextTick(() => {
                this.QuickPass()
                this.Exportsuccess(this.tableData.length, username)
              })
            }
            // 还原原有数据
            setTimeout(() => {
              this.tableData = original
            })
          }
        })
      } else {
        this.QuickPass()
      }
    },

    // 横向保留20条
    ReservedBar(arr) {
      let newArr = arr.map(obj => {
        let newObj = {}
        let count = 0
        for (let key in obj) {
          if (count < 22) {
            newObj[key] = obj[key];
            count++;
          }
        }
        return newObj
      })
      return newArr
    },

    // 快速导出
    QuickPass() {
      var excelName = $(".excelName").html();
      var addFooterHtml =
      '<tr class="tableNone"></tr><tr class="tableNone"></tr><tr class="tableNone"></tr><tr class="tableNone"></tr><tr class="tableNone"></tr><tr class="tableNone"><td></td><td>数据来源：数据圈</td></tr><tr class="tableNone"><td></td><td>联系人：刘老师</td></tr><tr class="tableNone"><td></td><td>电&nbsp;&nbsp;话：18810308405</td></tr><tr class="tableNone"><td></td><td>E-mail：shicong.liu@shujuquan.com</td></tr>';
      $("#mytable")
        .find(".el-table__fixed-body-wrapper")
        .find("tbody")
        .append(addFooterHtml);
      var fix = document.querySelector(".el-table__fixed");
      var wb;
      if (fix) {
        wb = XLSX.utils.table_to_book(
          document.querySelector("#mytable").removeChild(fix)
        );
        document.querySelector("#mytable").appendChild(fix);
        $(".tableNone").remove();
      } else {
        wb = XLSX.utils.table_to_book(document.querySelector("#mytable"));
      }
      /* get binary string as output */
      var wbout = XLSX.write(wb, {
        bookType: "xlsx",
        bookSST: true,
        type: "array",
      });
      let date = new Date();
      date = `${date.getFullYear()}${date.getMonth() + 1}${date.getDate()}`;
      try {
        FileSaver.saveAs(
          new Blob([wbout], { type: "application/octet-stream" }),
          `` + excelName + `${date}.xlsx`
        );
      } catch (e) {
        if (typeof console !== "undefined") console.log(e, wbout);
      }
      return wbout;
    },

    // 导出成功
    Exportsuccess(value, user) {
      this.$axios.request({
        url: "5100/user/exportRestrictions",
        method: "get",
        params: {
          exportNumber: value,
          userName: user
        },
      }).then(res => {
        return res.data
      })
    },

    async firstInit() {
      var that = this;
      var params = {};
      let resIndex = await this.$axios.request({
        url: "5600/hscomclass/gethsmenu",
        method: "get",
        params: params,
      });
      if (resIndex) {
        let data1 = resIndex.data.data;
        let defaultCheckedKeysData = [];
        data1.forEach((item) => {
          if (item.isShow) {
            defaultCheckedKeysData.push(item.name);
          }
        });
        this.defaultCheckedKeysData = defaultCheckedKeysData;
        this.sourceDataChecked = _.cloneDeep(defaultCheckedKeysData);
        var data = that.getNavData(_.cloneDeep(data1));
        this.data = data
      }

      let dataTime1 = await this.$axios.request({
        url: "5600/hscomclass/gethsmodel",
        method: "get",
        params: params,
      });
      if (dataTime1) {
        let data = dataTime1.data.datas;
        data.sort(function (a, b) {
          return b - a;
        });
        that.timeSource = data;
        if (dataTime1.data) {
          let timeArr = [];
          for (let e of data) {
            timeArr.push({
              id: e,
              label: e,
            });
          }
          this.dataTime = [
            {
              id: "all",
              label: "全选",
              children: timeArr,
            },
          ];
        }
      }

      let dataRegion1 = await this.$axios.request({
        url: "5600/hscomclass/gethsregion",
        method: "get",
        params: params,
      });
      if (dataRegion1) {
        let dataRegionArr = [];
        for (let e of dataRegion1.data.datas) {
          dataRegionArr.push({
            id: e,
            label: e,
          });
        }
        this.dataRegion = [
          {
            id: "all",
            label: "全选",
            children: dataRegionArr,
          },
        ];
      }

      let gethsplate = await this.$axios.request({
        url: "5600/hscomclass/gethsplate",
        method: "get",
        params: params,
      });
      if (gethsplate) {
        let gethsplateArr = [];
        for (let e of gethsplate.data.datas) {
          gethsplateArr.push({
            id: e,
            label: e,
          });
        }
        this.dataHsplate = [
          {
            id: "all",
            label: "全选",
            children: gethsplateArr,
          },
        ];
      }

      this.getList();
    },
    getNavData(list, parentId) {
      if (!parentId) {
        parentId = -1;
      }
      let result = [];
      for (var i = 0; i < list.length; i++) {
        if (list[i].parenid == parentId) {
          list[i].label = list[i].name;
          list[i].children = this.getNavData(list, list[i].id);
          result.push(list[i]);
        }
      }
      return result;
    },
  },
  mounted() {
    this.firstInit();
  },
};
</script>

<style scoped>
.mainBody {
  color: #fff;
  background-color: #25262e;
}

/deep/ .table-l {
  position: relative;
}

/deep/ .el-table__body-wrapper {
  border-top: 0 !important;
}

/deep/ .el-table__fixed-body-wrapper tbody tr td:nth-child(3) {
  cursor: pointer;
}
/deep/ .el-table__body tbody tr td div {
  border-bottom: 1px solid transparent;
}

/deep/ .el-table__fixed-body-wrapper tbody tr td:nth-child(3) div {
  border-bottom: 1px solid #1ac5e4;
  width: 70px !important;
  margin: 0 auto;
  box-sizing: border-box;
}

/deep/ .el-table__fixed-right::before,
.el-table__fixed::before {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 1px;
  background-color: #1f2027;
  z-index: 4;
}
.el-table__empty-text {
  text-align: left;
  width: 100%;
  margin-left: 8%;
}
/deep/ .el-table__empty-block {
  justify-content: left;
}
/deep/ .el-table__empty-text {
  padding-left: 400px;
}
</style>
